<template>
	<view class="root-box root-container root-page-top">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template v-slot:top>
				<uv-navbar autoBack placeholder bgColor="transparent" :fixed="false" title="小区列表" />
				<view class="content">
					<uv-search inputAlign="left" :showAction="false" :placeholder="placeholderTxt" v-model="keyWordVal"
					@change="onSearchChange" ></uv-search>
				</view>
			</template>
			<view class="loop-container" v-for="(item,index) in dataList" :key="item.id">
				<view class="loop-item-box">
					<view class="loop-item-box-text">
						绑定时间:{{item.approved_time}}
					</view>
					<view class="loop-item-box-text">
						小区名称:{{item.name}}
					</view>
					<view class="loop-item-box-text">
						普通合伙人:{{item.real_name}}
					</view>
					<view class="loop-item-box-text">
						地址:{{item.address}}
					</view>

					

					<view class="bt-box">
						<tui-button type="danger" shape="circle" height="60rpx" size="22" width="280rpx"
							@click="navigate('/pages-agent/revenue_statistics')">小区收费统计</tui-button>
						<tui-button type="danger" shape="circle" height="60rpx" size="22"
							width="280rpx">收费标准</tui-button>
					</view>
				</view>
			</view>
		</z-paging>
	</view>


</template>

<script setup>
	import {
		ref
	} from 'vue'
	


	import {
		navigate
	} from '@/util/tools.js';
	
	import {
		agentCommunityList
	} from '@/api/other.js'

	const dataList = ref([])
	const paging = ref(null)
    const keyWordVal=ref(null)
	const placeholderTxt = ref('请输入小区名称')

	
	const onSearchChange=()=>{
		paging.value.reload()
	}

	const queryList = (pageNo, pageSize) => {
		agentCommunityList({
			page: pageNo,
			limit: pageSize,
			keywords: keyWordVal.value

		}).then(res => {

			
			paging.value.complete(res.result.data);
		}).catch(res => {
			paging.value.complete(false);
		})
	}
	const init = async () => {

	}
	init()
</script>

<style lang="scss" scoped>
	.root-box {
		.content {
			padding: 30upx;
			box-sizing: border-box;

		}
	}

	.loop-item-box {
		margin-top: 20upx;
		padding: 30upx;
		box-sizing: border-box;
		border-radius: 20upx 20upx 20upx 20upx;
		background-color: #fff;
		box-shadow: 5upx 5upx 5upx #cccccc;
	}

	.plan-box {
		margin-top: 20upx;
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 30upx;
		box-sizing: border-box;
		background: #e1e1e1;
		border-radius: 10upx 10upx 10upx 10upx;
	}

	.plan-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 160upx;
		font-size: 20upx;
		color: #333;
		padding: 0 30upx;
		box-sizing: border-box;

	}

	.num-item {
		font-size: 30upx;
		font-weight: 600;
	}

	.bt-box {
		display: flex;
		justify-content: space-between;
		padding: 30upx;
	}

	.loop-item-box-text {
		margin-top: 10upx;
		font-size: 20upx;
		color: #666;

	}
</style>